<template>
  <div class="my_container" style="height: calc(100% - 53px)">
    <van-search v-model="keyword" placeholder="请输入搜索关键词" @search="onLoad"> </van-search>
    <div style="height: calc(100% - 44px - 5px); overflow: scroll; margin-top: 5px">
      <van-cell clickable size="large" style="margin-bottom: 3px" v-for="item in list" :key="item.Pk" @click="go_detail(item)">
        <template #title>
          <span>{{ item.ProductName }}</span>
        </template>
        <template #icon>
          <div style="padding-right: 5px">
            <van-tag plain style="height: 100%" type="primary">{{ item.PlaceCode }}</van-tag>
          </div>
        </template>
        <template #label>
          <p>{{ item.QrCode }}</p>
          <p>{{ item.CreateDate?.substring(0, 10) }}</p>
        </template>
        <template #value>
          <p style="font-size: 28px">{{ item.OnHand }}</p>
        </template>
      </van-cell>
      <van-empty v-if="list?.length === 0" image="search" description="当前没有数据" />
    </div>
    <van-overlay :show="loading">
      <div class="loading_wrapper"><van-loading type="spinner" size="24" /></div
    ></van-overlay>
  </div>
</template>
<script setup lang="ts" name="stocklist">
import { listStock } from '@/api/stock';
import type { StockModel } from '@/model/stockmodel';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const loading = ref(false);
const list = ref<StockModel[]>();
const router = useRouter();
const keyword = ref('');
const onLoad = () => {
  loading.value = true;
  listStock(keyword.value)
    .then((r) => {
      keyword.value = '';
      list.value = r.Data;
      loading.value = false;
    })
    .catch((e) => {
      keyword.value = '';
      loading.value = false;
    });
};
onMounted(onLoad);
const go_detail = (item: StockModel) => {
  router.push({ path: '/stockdetail', query: { pk: item.Pk } });
};
</script>

<style scoped></style>
